<template>
    <div class="search-box">
        <div class="flex">
            <div style="color: black;">
                <el-icon>
                    <Search />
                </el-icon><span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="submitFn" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px" class="from">
            <el-form ref="searchFormRef" :model="listParams" class="flex2">
                <el-form-item prop="id" label="输入搜索:" label-width="150px">
                    <el-input v-model="listParams.id" placeholder="服务单号"></el-input>
                </el-form-item>

                <el-form-item prop="status" label="处理状态:" label-width="150px">
                    <el-select v-model="listParams.status" placeholder="全部" clearable>
                        <el-option label="待处理" value="0" />
                        <el-option label="退货中" value="1" />
                        <el-option label="已完成" value="2" />
                        <el-option label="已拒绝" value="3" />
                    </el-select>
                </el-form-item>

                <el-form-item prop="createTime" label="申请时间:" label-width="150px">
                    <el-date-picker v-model="listParams.createTime" type="date" placeholder="请选择时间" style="width: 100%"
                        clearable value-format="YYYY-MM-DD" />
                </el-form-item>

                <el-form-item prop="handleMan" label="操作人员:" label-width="150px">
                    <el-input v-model="listParams.handleMan" placeholder="全部"></el-input>
                </el-form-item>

                <el-form-item prop="handleTime" label="处理时间:" label-width="150px">
                    <el-date-picker v-model="listParams.handleTime" type="date" placeholder="请选择时间" style="width: 100%"
                        page-count clearable value-format="YYYY-MM-DD" />
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div class="add-box">
        <div>
            <el-icon>
                <Document />
            </el-icon>数据列表
        </div>
    </div>

    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="服务单号" align="center" width="300" />
        <el-table-column prop="createTime" label="申请时间" align="center" width="200">
            <template #default="scope">
                {{ fomatDate(scope.row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="memberUsername" label="用户账号" align="center" width="300" />
        <el-table-column prop="productRealPrice" label="退货金额" align="center" width="100" />
        <el-table-column prop="status" label="申请状态" align="center" width="100">
            <template #default="scope">
                {{ fomatstatus(scope.row.status) }}
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="处理时间" align="center">
            <template #default="scope">
                {{ fomatDate(scope.row.handleTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" align="center" width="100">
            <template #default="scope">
                <el-button @click="router.push(`/oms/returnApplyDetail?id=${scope.row.id}`)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="Page">
        <div class="del">
            <el-select v-model="state.val" placeholder="批量操作">
                <el-option label="批量删除" value="0" />
            </el-select>
            <el-button type="primary" @click="delete1">确定</el-button>
        </div>
        <ElConfigProvider :locale="zhCn">
            <el-pagination background v-model:currentPage="listParams.pageNum" @size-change="pageSizeChagne"
                @current-change="currentChange" v-model:page-size="listParams.pageSize" :page-sizes="[5, 10, 15]"
                default-current-page layout="total,prev,sizes,prev, pager,next,jumper" :total="total" />
        </ElConfigProvider>
    </div>
</template>
<script setup lang='ts'>
import { FormInstance, ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus';
import { Document, Search } from "@element-plus/icons-vue";
import { reactive, ref, toRefs } from 'vue';
import { fomatDate, fomatstatus } from "@/utils/index";
import { user } from '@/api';
import { useRouter } from "vue-router";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

// 创建路由实例
const router = useRouter()

// 创建表单实例
const searchFormRef = ref<FormInstance>()

interface State {
    listParams: returnApply
    tableData: getreturnApply[]
    total: number,
    val?: number | null
}

// 表单数据
const state = reactive<State>({
    listParams: {
        createTime: null,
        handleMan: null,
        handleTime: null,
        id: null,
        pageNum: 1,
        pageSize: 10,
        receiverKeyword: null,
        status: null
    },
    tableData: [],
    total: 0,
    val: null
})

// 页面渲染
const getList = () => {
    user.getreturnApply(state.listParams).then(res => {
        if (res.code == 200) {
            state.tableData = res.data.list
            state.total = res.data.total
        }
    })
}
getList()
// 重置
const resetForm = () => {
    searchFormRef.value?.resetFields()

}
// 搜索
const submitFn = () => {
    getList()
}

// 多选
const ids = ref<number[]>([])
const handleSelectionChange = (val: getreturnApply[]) => {
    ids.value = val.map(item => item.id)
}

// 分页
const pageSizeChagne = () => {
    getList()
}
// 分页
const currentChange = () => {
    getList()
}

// 删除
const delete1 = () => {
    if (state.val == null) {
        ElMessage.warning("请选择要操作的申请")
        return
    }
    ElMessageBox.confirm('是否要进行删除操作吗?')
        .then(() => {
            if (state.val == 0) {
                user.deletereturnApply(ids.value).then(res => {
                    if (res.code == 200) {
                        ElMessage.success("删除成功")
                        getList()
                    } else {
                        ElMessage.error("删除失败")
                    }
                })
            }
        })
}


let { listParams, tableData, total } = toRefs(state)
</script>
<style lang="less" scoped>
.search-box {
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 0 1px 1px #ccc;
    color: black;
    color: black;
    font-size: 20px;

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .flex2 {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.el-icon {
    vertical-align: top;
}

.from {
    .el-form-item {
        width: 350px;
    }
}

.add-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    margin: 20px 0;
    height: 66px;
    border-radius: 2px;
    box-shadow: 0 0 1px 1px #ccc;
    color: black;
    font-size: 20px;
    box-sizing: border-box;
}

.Page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .del {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .el-button {
            margin-left: 20px;
        }
    }
}
</style>